<!-- Begin breadcrumb -->
<ol class="breadcrumb default square rsaquo sm">
    <li><a href="#"><i class="fa fa-home"></i></a></li>
    <li>图片管理</li>
</ol>
<!-- End breadcrumb -->

<div class="the-box no-border">
    <div class="row">
        <div class="col-sm-8">
            <ul class="nav nav-pills nav-success">
                <button class="btn btn-info"><i class="fa fa-picture-o"></i> 我上传的</button>
                <button class="btn btn-success"><i class="fa fa-users"></i> 文章引用</a></button>
                <button class="btn btn-primary"><i class="fa fa-camera"></i> 外链引用</a></button>
            </ul>
        </div>
        <div id="container" class="col-sm-4 text-right">
            <button id="pickfiles" class="btn btn-warning"><i
                    class="fa fa-cloud-upload"></i> 添加图片
            </button>
        </div>
        <div class="modal fade" id="img-upload-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content modal-no-shadow modal-no-border">
                    <div class="modal-header bg-warning no-border">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">上传图片</h4>
                    </div>
                    <div id="filelist" class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="uploadfiles" type="button" class="btn btn-warning">上传</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-masonry magnific-popup-wrap">
    <ol id="img-show-list">

    </ol>
</div>

<script src="/plugins/plupload/plupload.full.min.js"></script>
<script src="/plugins/plupload/i18n/zh_CN.js"></script>
<script src="/pagejs/my-images.js"></script>
<script>
    $(document).ready(function () {
        function $p(id) {
            return document.getElementById(id);
        }

        var uploader = new plupload.Uploader({
            runtimes: 'html5',
            browse_button: 'pickfiles', // you can pass in id...
            container: $p('container'), // ... or DOM Element itself
            max_file_size: '10mb',
            unique_names: false,
            url: "/api/fileupload/img",
            filters: [
                {title: "Image files", extensions: "jpg,gif,png"}
            ],

            init: {
                PostInit: function () {
                    $p('uploadfiles').onclick = function () {
                        uploader.start();
                        return false;
                    };
                },

                FilesAdded: function (up, files) {
                    $("#filelist").empty();
                    $("#img-upload-modal").modal('show');
                    plupload.each(files, function (file) {
                        $p('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + '<span></span></div>';
                    });
                },

                UploadProgress: function (up, files) {
//                    plupload.each(files, function (file) {
//                        $p('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + '<span>' + file.percent + '</span></div>';
//                    });
                },
                FileUploaded: function (up, file, res) {

                },
                UploadComplete: function (up, file) {
                    toastr.success('上传成功');
                    setTimeout(function () {
                        $("#img-upload-modal").modal('hide');
                    }, 1000)
                }
            }
        });
        uploader.init();
        getAllImgs();
    });

    function getAllImgs() {
        $.ajax({
            url: '/api/image',
            type: 'GET',
            success: function (data) {
                if (data.code == 1) {
                    var result = data.result;
                    var str = '';
                    result.map(function (index, key) {
                        str += '<li class="item-masonry">' +
                            '<div class="the-box full no-border featured-post-wide mansory-inner">' +
                            '<a class="zooming" href="' + index.url + '" title="' + index.title + '">' +
                            '<img src="' + index.url + '" class="featured-img mfp-fade item-gallery img-responsive" alt="image" height="100%" width="auto">' +
                            '</a>' +
                            '<div class="featured-text relative">' +
                            '<p style="margin: 0">' + index.title + '</p>' +
                            '<hr class="all-hr" />' +
                            '<p style="margin: 0">' + index.desc + '</p>' +
                            '<p class="additional-post-wrap" style="margin: 0">' +
                            '<span class="additional-post" style="padding: 0"><i class="fa fa-clock-o"></i>April 20</span>' +
                            '</p></div> </div> </li>'
                    })
                    $('#img-show-list').html(str);
                    $("#image-total").text(result.length);
                    initImgMasonry();
                } else {
                    toastr.error("查询失败:" + data.msg + "！");
                }
            }
        });
    }

    // 初始化图片zoom
    function initImgMasonry() {
        if ($('.magnific-popup-wrap').length > 0) {
            $('.magnific-popup-wrap').each(function () {
                "use strict";
                $(this).magnificPopup({
                    delegate: 'a.zooming',
                    type: 'image',
                    removalDelay: 300,
                    mainClass: 'mfp-fade',
                    gallery: {
                        enabled: true
                    }
                });
            });
        }

        if ($('.inline-popups').length > 0) {
            $('.inline-popups').magnificPopup({
                delegate: 'a',
                removalDelay: 500,
                callbacks: {
                    beforeOpen: function () {
                        this.st.mainClass = this.st.el.attr('data-effect');
                    }
                },
                midClick: true
            });
        }
        $('.magnific-img').magnificPopup({
            type: 'image',
            removalDelay: 300,
            mainClass: 'mfp-fade'
        });
    }
</script>